<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui" template="template.xhtml">

	<ui:define name="head">

	</ui:define>

	<ui:define name="content">
		<h:form id="form1">

			<p:ajaxStatus style="width:16px;height:16px;">
				<f:facet name="Inicio">
					<h:graphicImage value="../design/ajaxloading.gif" />
				</f:facet>

				<f:facet name="Completo">
					<h:outputText value="" />
				</f:facet>
			</p:ajaxStatus>

			<p:outputPanel id="listaFuncionalidade">
				<p:dataTable value="#{manterFuncionalidade.listaFuncionalidade}"
					selectionMode="single" onRowSelectUpdate="form2:display growl"
					selection="#{manterFuncionalidade.funcionalidade}"
					onRowSelectComplete="funcionalidadeDialog.show()"
					var="funcionalidade">

					<p:column>
						<f:facet name="header">
							<h:outputText value="ID" />
						</f:facet>
						<h:outputText value="#{funcionalidade.id}" />
					</p:column>

					<p:column>
						<f:facet name="header">
							<h:outputText value="Nome" />
						</f:facet>
						<h:outputText value="#{funcionalidade.nome}" />
					</p:column>

					<p:column>
						<f:facet name="header">
							<h:outputText value="Operação" />
						</f:facet>
						<p:commandLink value="Remover" update="form1:listaFuncionalidade"
							onclick="confirmation.show()">
							<f:setPropertyActionListener
								target="#{manterFuncionalidade.funcionalidade}"
								value="#{funcionalidade}"></f:setPropertyActionListener>

							<p:collector value="#{funcionalidade}"
								removeFrom="#{manterFuncionalidade.listaFuncionalidade}" />
						</p:commandLink>
					</p:column>
				</p:dataTable>

			</p:outputPanel>

			<p:confirmDialog message="Tem certeza que deseja remover?"
				showEffect="bounce" hideEffect="explode" modal="true"
				header="Initiating destroy process" severity="alert"
				widgetVar="confirmation">

				<p:commandButton value="Sim" update="messages listaFuncionalidade"
					oncomplete="confirmation.hide()"
					action="#{manterFuncionalidade.doRemoverAction}" />
				<p:commandButton value="Não" onclick="confirmation.hide()"
					type="button" />

			</p:confirmDialog>


			<p:commandButton value="Adicionar"
				action="#{manterFuncionalidade.criarFuncionalidade}"
				update="form2:display" image="ui-icon-circle-plus"
				oncomplete="funcionalidadeDialog.show()" />

		</h:form>

		<h:form id="form2">
			<p:dialog header="Funcionalidade" widgetVar="funcionalidadeDialog"
				resizable="false" modal="true" width="400" showEffect="explode"
				hideEffect="explode">

				<p:panel id="display">
					<h:panelGrid columns="2" cellpadding="4">

						<h:outputText value="Model:" />
						<p:inplace>
							<p:inputText value="#{manterFuncionalidade.funcionalidade.nome}" />
						</p:inplace>

						<h:outputText value="Menu:" />
						<p:inputText
							value="#{manterFuncionalidade.servicoFuncionalidade.nome}" />

						<h:outputText value="URL:" />

						<h:panelGroup>
							<p:inputText
								value="#{manterFuncionalidade.servicoFuncionalidade.url}" />

							<p:commandButton image="ui-icon-circle-plus"
								style="margin-left:10px;"
								update="form2:listaServicoFuncionalidade display @parent "
								action="#{manterFuncionalidade.criarServicoFuncionalidade}">
								<p:collector
									value="#{manterFuncionalidade.servicoFuncionalidade}"
									addTo="#{manterFuncionalidade.funcionalidade.listaServicoFuncionalidade}" />
							</p:commandButton>
						</h:panelGroup>
					</h:panelGrid>

					<p:spacer height="10px;" />

					<p:dataTable id="listaServicoFuncionalidade"
						value="#{manterFuncionalidade.funcionalidade.listaServicoFuncionalidade}"
						var="servicoFuncionalidade">

						<p:column>
							<h:outputText value="#{servicoFuncionalidade.nome}" />
						</p:column>
						<p:column>
							<h:outputText value="#{servicoFuncionalidade.url}" />
						</p:column>

					</p:dataTable>

					<h:panelGrid columns="2" cellpadding="4">
						<p:commandButton value="#{msgs.btnSalvar}" image="ui-icon-check"
							action="#{manterFuncionalidade.doSalvarAction}"
							oncomplete="funcionalidadeDialog.hide()"
							update="form1:listaFuncionalidade display">

						</p:commandButton>
					</h:panelGrid>

				</p:panel>
			</p:dialog>
		</h:form>
	</ui:define>

</ui:composition>